/* eslint-disable no-redeclare */
/* eslint-disable no-prototype-builtins */
/* eslint-disable no-unused-vars */

/**
 *
 * 全局指令注册js
 * 1.input输入校验
 * 2.按钮submit提交校验表单元素
 * 3.局部显示loading加载状态
 *
 */

import Vue from "vue";

var elArr = []; //保存所有input的el
// 全局注册指令——input验证
Vue.directive("validate", {
	inserted: function (el, validateStr) {
		// console.log(el);
		// console.log(el.firstChild.nextSibling);
		// 将验证规则拆分为验证数组
		let validateRuleArr = validateStr.value.split("|");
		var el = el;
		var elInput = el;
		if (el.className.indexOf("x_input") !== -1) {
			elInput = el.firstChild.nextSibling;
		} else if (el.className.indexOf("el-input") !== -1) {
			elInput = el.firstChild.nextSibling;
		} else if (el.className.indexOf("el-textarea") !== -1) {
			elInput = el.firstChild;
		} else if (el.className.indexOf("el-select") !== -1) {
			elInput = el;
		}
		// 监听失去焦点的时候
		elInput.addEventListener("blur", function () {
			//失去焦点进行验证
			checkedfun();
		});

		// //用于提交的时候验证
		// for (let a in elArr) {
		// 	if (elArr[a].outerHTML == elInput.outerHTML) {
		// 		elArr.splice(a, 1);
		// 	}
		// }
		elArr.push(elInput);

		// 循环进行验证
		function checkedfun() {
			for (var i = 0; i < validateRuleArr.length; ++i) {
				let requiredRegex = /^required$/; // 判断设置了required
				let selectAtLeastRegex = /^selectAtLeast$/; // 判断设置了selectAtLeast
				let selectAtLeastOnlyRegex = /^selectAtLeastOnly$/; // 判断设置了selectAtLeastOnly
				let pinRegex = /^pin$/; // 判断设置了pin
				let pinAndNullRegex = /^pinAndNull$/; // 判断设置了pin 和  空
				let ipAddrRegex = /^ipAddr$/; // 判断设置了ipAddr
				let ipAddrAndnullRegex = /^ipAddrAndnull$/; // 判断设置了ipAddr和空
				let resolutionRegex = /^resolution$/; // 判断设置了resolution（分辨率）
				let portRegex = /^port$/; // 判断设置了port
				let portAndnullRegex = /^portAndnull$/; // 判断设置了port和空
				let gatewayRegex = /^gateway$/; // 判断设置了gateway
				let subnetMaskRegex = /^subnetMask$/; // 判断设置了subnetMask
				let emailRegex = /^email$/; // 判断设置了email
				let phoneRegex = /^phone$/; // 判断设置了 phone
				let pwdRegex = /^pwd$/; // 判断设置了 pwd
				let pwdornullRegex = /^pwdornull$/; // 判断设置了 pwdornull
				let minRegex = /min\(/; //判断设置了min 最小值
				let maxRegex = /max\(/; //判断设置了max 最大值
				let minlengthRegex = /minlength\(/; //判断设置了 minlength 最大长度
				let maxlengthRegex = /maxlength\(/; //判断设置了 maxlength 最大长度
				let regexRegex = /regex\(/;
				let hostAndEmptyRegex = /^hostAndEmpty$/;
				// 判断设置了 host
				if (hostAndEmptyRegex.test(validateRuleArr[i])) {
					if (!host()) {
						break;
					} else {
						removeTips();
					}
				}
				// 判断设置了required
				if (requiredRegex.test(validateRuleArr[i])) {
					if (!required()) {
						break;
					} else {
						removeTips();
					}
				}

				// 判断设置了selectAtLeast
				if (selectAtLeastRegex.test(validateRuleArr[i])) {
					if (!selectAtLeast()) {
						break;
					} else {
						removeTips();
					}
				}

				// 判断设置了selectAtLeastOnly
				if (selectAtLeastOnlyRegex.test(validateRuleArr[i])) {
					if (!selectAtLeastOnly()) {
						break;
					} else {
						removeTips();
					}
				}

				// 判断设置了pin
				if (pinRegex.test(validateRuleArr[i])) {
					if (!pin()) {
						break;
					} else {
						removeTips();
					}
				}

				// 判断设置了pin  和  空
				if (pinAndNullRegex.test(validateRuleArr[i])) {
					if (!pinAndNull()) {
						break;
					} else {
						removeTips();
					}
				}

				// 判断设置了ipAddr
				if (ipAddrRegex.test(validateRuleArr[i])) {
					if (!ipAddr()) {
						break;
					} else {
						removeTips();
					}
				}

				// 判断设置了ipAddrAndnullRegex
				if (ipAddrAndnullRegex.test(validateRuleArr[i])) {
					if (!ipAddrAndnull()) {
						break;
					} else {
						removeTips();
					}
				}

				// 判断设置了ipAddrAndnullRegex
				if (resolutionRegex.test(validateRuleArr[i])) {
					if (!resolution()) {
						break;
					} else {
						removeTips();
					}
				}

				// 判断设置了port
				if (portRegex.test(validateRuleArr[i])) {
					if (!port()) {
						break;
					} else {
						removeTips();
					}
				}

				// 判断设置了portAndnullRegex
				if (portAndnullRegex.test(validateRuleArr[i])) {
					if (!portAndnull()) {
						break;
					} else {
						removeTips();
					}
				}

				// 判断设置了gateway
				if (gatewayRegex.test(validateRuleArr[i])) {
					if (!gateway()) {
						break;
					} else {
						removeTips();
					}
				}

				// 判断设置了subnetMask
				if (subnetMaskRegex.test(validateRuleArr[i])) {
					if (!subnetMask()) {
						break;
					} else {
						removeTips();
					}
				}

				// 判断设置了email
				if (emailRegex.test(validateRuleArr[i])) {
					if (!email()) {
						break;
					} else {
						removeTips();
					}
				}

				// 判断设置了 phone
				if (phoneRegex.test(validateRuleArr[i])) {
					if (!phone()) {
						break;
					} else {
						removeTips();
					}
				}
				// 判断设置了 pwd
				if (pwdRegex.test(validateRuleArr[i])) {
					if (!pwd()) {
						break;
					} else {
						removeTips();
					}
				}

				// 判断设置了 pwdornull
				if (pwdornullRegex.test(validateRuleArr[i])) {
					if (!pwdornull()) {
						break;
					} else {
						removeTips();
					}
				}

				// 判断是否设置了最小值
				if (minRegex.test(validateRuleArr[i])) {
					if (!eval(validateRuleArr[i])) {
						break;
					} else {
						removeTips();
					}
				}

				// 判断是否设置了最大值
				if (maxRegex.test(validateRuleArr[i])) {
					if (!eval(validateRuleArr[i])) {
						break;
					} else {
						removeTips();
					}
				}

				// 判断设置了最小长度
				if (minlengthRegex.test(validateRuleArr[i])) {
					if (!eval(validateRuleArr[i])) {
						break;
					} else {
						removeTips();
					}
				}

				// 判断设置了最大长度
				if (maxlengthRegex.test(validateRuleArr[i])) {
					if (!eval(validateRuleArr[i])) {
						break;
					} else {
						removeTips();
					}
				}

				// 判断测试正则表达式
				if (regexRegex.test(validateRuleArr[i])) {
					if (!eval(validateRuleArr[i])) {
						break;
					} else {
						removeTips();
					}
				}
			}
		}
		function host(){
			if (elInput.value === null || elInput.value === undefined || elInput.value === "" || elInput.value === '') {
				return true;
			}
			let hostRule = /(?!:\/\/)(?:[-\w]+\.){1,126}(?:[-\w]+\.)+[a-z]{2,}(?::\d+)?/;
			let ipAddrRule = /^((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))$/;
			console.log("hostRule", hostRule.test(elInput.value));
			console.log("ipAddrRule", ipAddrRule.test(elInput.value));
			if (hostRule.test(elInput.value) || ipAddrRule.test(elInput.value)) {
				return true;
			}
			tipMsg("请输入正确的域名或ip～");
			return false;
		}

		// 验证是否是必填项
		function required() {
			if (elInput.value == "" || elInput.value == null) {
				// console.log("不能为空");
				tipMsg("该输入框不能为空哦~");
				return false;
			}

			return true;
		}

		// 验证el-select多选（是否选中至少一个值）
		function selectAtLeast() {
			console.log(elInput);
			if (elInput.firstChild.children.length <= 0) {
				tipMsg("至少选择一个选项哦~");
				return false;
			}

			return true;
		}

		// 验证el-select单选（是否选中）
		function selectAtLeastOnly() {
			console.log(elInput);
			console.log(elInput.firstChild.nextSibling.firstChild.nextSibling.value);
			if (
				elInput.firstChild.nextSibling.firstChild.nextSibling.value == "" ||
				elInput.firstChild.nextSibling.firstChild.nextSibling.value == null
			) {
				tipMsg("请选择一个选项哦~");
				return false;
			} else {
				return true;
			}
		}

		// 正整数positiveinteger
		function pin() {
			let positiveintegerRule = /^[1-9]\d*$/;
			if (!positiveintegerRule.test(elInput.value)) {
				tipMsg("请输入正确的正整数");
				return false;
			}
			return true;
		}
		// 正整数positiveinteger 和  空
		function pinAndNull() {
			let positiveintegerRule = /^[1-9]\d*$/;
			if (elInput.value == "") {
				return true;
			}
			if (!positiveintegerRule.test(elInput.value)) {
				tipMsg("请输入正确的正整数");
				return false;
			}
			return true;
		}

		// IPV4
		function ipAddr() {
			let ipAddrRule = /^((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))$/;
			if (!ipAddrRule.test(elInput.value)) {
				tipMsg("请输入正确的IPV4地址");
				return false;
			}
			return true;
		}

		// IPV4可以为空
		function ipAddrAndnull() {
			let ipAddrRule = /^((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))$/;
			if (elInput.value == "") {
				// 允许IPV4为空
				return true;
			}
			if (!ipAddrRule.test(elInput.value)) {
				tipMsg("请输入正确的IPV4地址");
				return false;
			}
			return true;
		}

		// resolution分辨率 xxxx*xxxx
		function resolution() {
			let ipAddrRule = /^[0-9]{1,4}\*([0-9]{1,4})$/;
			if (elInput.value == "") {
				// 允许分辨率为空
				return true;
			}
			if (!ipAddrRule.test(elInput.value)) {
				tipMsg("请输入正确的分辨率");
				return false;
			}
			return true;
		}

		// 端口【0~65535】
		function port() {
			let portRule = /^[1-9]\d*$/;
			if (!(portRule.test(elInput.value) && 1 <= 1 * elInput.value && 1 * elInput.value <= 65535)) {
				tipMsg("请输入正确格式的端口号");
				return false;
			}
			return true;
		}

		// 端口【0~65535】 和  空
		function portAndnull() {
			let portRule = /^[1-9]\d*$/;
			if (elInput.value == "") {
				// 允许端口为空
				return true;
			}
			if (!(portRule.test(elInput.value) && 1 <= 1 * elInput.value && 1 * elInput.value <= 65535)) {
				tipMsg("请输入正确格式的端口号");
				return false;
			}
			return true;
		}

		// 网关
		function gateway() {
			// let gatewayRule = /^(192\.168(\.(\d|([1-9]\d)|(1\d{2})|(2[0-4]\d)|(25[0-5]))){2})$/;
			let gatewayRule = /^((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))$/;
			if (!gatewayRule.test(elInput.value)) {
				tipMsg("请输入正确的网关地址");
				return false;
			}
			return true;
		}

		// 子网掩码
		function subnetMask() {
			let subnetMaskRule =
				/^(254|252|248|240|224|192|128|0)\.0\.0\.0|255\.(254|252|248|240|224|192|128|0)\.0\.0|255\.255\.(254|252|248|240|224|192|128|0)\.0|255\.255\.255\.(254|252|248|240|224|192|128|0)$/;
			if (!subnetMaskRule.test(elInput.value)) {
				tipMsg("请输入正确的子网掩码");
				return false;
			}
			return true;
		}

		// 验证是否是邮箱
		function email() {
			let emailRule = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
			if (!emailRule.test(elInput.value)) {
				tipMsg("请输入正确的邮箱地址");
				return false;
			}

			return true;
		}

		// 验证是否是手机号码
		function phone() {
			let phoneRule = /^[1][3,4,5,7,8,9][0-9]{9}$/;
			if (elInput.value == "") {
				// 允许手机号为空
				return true;
			}
			if (!phoneRule.test(elInput.value)) {
				tipMsg("请输入正确的手机号码");
				return false;
			}
			return true;
		}

		// 进行密码的验证
		function pwd() {
			let pwdRule = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z._*#$@]{8,20}$/;
			if (!pwdRule.test(elInput.value)) {
				// tipMsg("密码由6-12位数字和字母组成。特殊字符包含（. _ * # $ @）");
				tipMsg("由8-20位数字、字母和特殊字符组成");
				return false;
			}
			return true;
		}

		// 进行密码的验证
		function pwdornull() {
			let pwdRule = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z._*#$@]{8,20}$/;
			if (elInput.value == "") {
				return true;
			} else if (!pwdRule.test(elInput.value)) {
				tipMsg("密码由8-20位数字和字母组成。特殊字符包含（. _ * # $ @）");
				return false;
			} else {
				return true;
			}
		}

		// 最小值验证
		function min(num) {
			if (elInput.value < num) {
				tipMsg("最小值不能小于" + num);
				// console.log('最小值不能小于'+num);
				return false;
			}

			return true;
		}

		// 最大值验证
		function max(num) {
			if (elInput.value > num) {
				tipMsg("最大值不能大于" + num);
				//console.log('最大值不能大于'+num);
				return false;
			}

			return true;
		}

		// 最小长度验证
		function minlength(length) {
			if (elInput.value.length < length) {
				// console.log('最小长度不能小于' + length);
				tipMsg("最小长度不能小于" + length);
				return false;
			}

			return true;
		}

		// 最大长度进行验证
		function maxlength(length) {
			if (elInput.value.length > length) {
				tipMsg("最大长度不能大于" + length);
				return false;
			}
			return true;
		}

		// 进行正则表达式的验证
		function regex(rules) {
			if (!rules.test(elInput.value)) {
				tipMsg("请输入正确的格式");
				return false;
			}
			return true;
		}

		// 添加提示信息
		function tipMsg(msg) {
			removeTips();
			console.log(elInput);
			elInput.classList.add("tip_el");
			let tipsDiv = document.createElement("div");
			tipsDiv.innerText = `${msg}`;
			tipsDiv.className = "tip_msg";
			// let parent = el.parentNode;
			// if (parent.lastChild == el) {
			// 	parent.appendChild(tipsDiv);
			// }
			let parent = el;
			// if (parent.lastChild == el) {
			parent.appendChild(tipsDiv);
			// }
		}

		// 移除提示信息
		function removeTips() {
			elInput.classList.remove("tip_el");
			let parent = elInput.parentNode;
			if (parent.lastChild.className == "tip_msg") {
				parent.removeChild(parent.lastChild);
			}
			//password
			if (el.className.indexOf("x_input") !== -1) {
				// let parent = el.parentNode;
				// if (parent.lastChild.className == "tip_msg") {
				// 	parent.removeChild(parent.lastChild);
				// }
				let parent = el;
				if (parent.lastChild.className == "tip_msg") {
					parent.removeChild(parent.lastChild);
				}
			} else if (el.className.indexOf("el-input") !== -1) {
				// let parent = el.parentNode;
				// if (parent.lastChild.className == "tip_msg") {
				// 	parent.removeChild(parent.lastChild);
				// }
				let parent = el;
				if (parent.lastChild.className == "tip_msg") {
					parent.removeChild(parent.lastChild);
				}
			} else if (el.className.indexOf("el-textarea") !== -1) {
				// let parent = el.parentNode;
				// if (parent.lastChild.className == "tip_msg") {
				// 	parent.removeChild(parent.lastChild);
				// }
				let parent = el;
				if (parent.lastChild.className == "tip_msg") {
					parent.removeChild(parent.lastChild);
				}
			} else if (el.className.indexOf("el-select") !== -1) {
				// let parent = el.parentNode;
				// if (parent.lastChild.className == "tip_msg") {
				// 	parent.removeChild(parent.lastChild);
				// }
				let parent = el;
				if (parent.lastChild.className == "tip_msg") {
					parent.removeChild(parent.lastChild);
				}
			}
		}
	},
});

// 全局注册指令——按钮提交验证input
Vue.directive("checksubmit", {
	inserted: function (el, binding, vNode) {
		el.addEventListener("click", function (event) {
			console.log("====");
			console.log(elArr);
			console.log("====");

			// let elements = document.getElementsByClassName(binding.value.cls)[0].getElementsByClassName('v-check')
			var evObj = document.createEvent("Event");
			evObj.initEvent("blur", true, true);
			for (let elArrChild of elArr) {
				elArrChild.dispatchEvent(evObj);
			}
			/*
			 *有一个参数
			 *eg: v-checkSubmit="submitBtn"
			 *参数为事件名
			 */
			let doc = document;
			let submitEvent = binding.value;
			/*
			 *有两个参数
			 *用于一个页面有两个确定，或者有其他因素干扰了确定按钮时使用
			 *eg: v-checkSubmit="{submitEvent:submitBtn,cls:'backups_all_input'}"
			 *submitEvent:事件名称
			 *cls：需要检测的class名下的input
			 */
			if (binding.value.hasOwnProperty("cls")) {
				// console.log(binding.value);
				doc = document.getElementsByClassName(binding.value.cls)[0];
				// console.log(doc)
				submitEvent = binding.value.submitEvent;
			}

			let errorInputs = doc.getElementsByClassName("tip_el"); //tip_el 检测不通过的input
			if (errorInputs.length === 0) {
				submitEvent(); //执行提交事件
			}
		});
	},
});

// 全局注册指令——loading(局部显示)
//customLoading为自定义指令的名字
//update为自定义指令的参数，当更新的时候会执行这个方法，它可以接受很多参数
//但我们这里只需要用到两个：el获取当前DOM，value获取当前指令的参数值
Vue.directive("customloading", {
	update: function (el, value) {
		if (value.value) {
			console.log(el);
			const canPush = el.getElementsByClassName("customLoading");
			if (canPush.length != 0) {
				return;
			}
			el.style.position = "relative";
			const para = document.createElement("div");
			const i_son = document.createElement("i");
			para.setAttribute("class", "customLoading");
			i_son.setAttribute("class", "wj-icon-loading refleash");
			para.appendChild(i_son);
			el.appendChild(para);
		} else {
			for (var i = 0; i < el.childNodes.length; i++) {
				if (el.childNodes[i].className == "customLoading") {
					const childNodes = el.getElementsByClassName("customLoading")[0];
					el.removeChild(childNodes);
					break;
				}
			}
		}
	},
});
